{extend name="public/base" /}
{block name="body"}
<div class="layui-fluid">
    <div class="layui-row">
        <div class="layui-col-sm12 layui-col-md12 layui-col-lg12">
			<div class="widget-head">
				<div class="widget-title">测试</div>
			</div>
			<div class="widget-body layui-col-lg12">
				<form action="" class="layui-form">
					<div id="sku" data-item="" data-data=""></div>
					<div class="layui-form-item">
						<label class="layui-form-label">结果</label>
						<div class="layui-input-block" id="data-html"></div>
					</div>
					<div class="layui-form-item">
						<div class="layui-input-block">
							<a class="layui-btn" id="get">获取数据</a>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>
{/block}
{block name="js"}
<script type="text/javascript">
	layui.config({
        base: '/static/libs/extend/' //静态资源所在路径
    }).extend({
    	sku: 'sku'
    });
	layui.use(['sku','jquery'],function(){
		var $ = layui.jquery,sku = layui.sku;

		var item = [{"id":1,"name":"颜色","sub":[{"id":1,"name":"黑"},{"id":2,"name":"白"},{"id":3,"name":"蓝"}]},{"id":2,"name":"尺寸","sub":[{"id":4,"name":"S"},{"id":5,"name":"M"},{"id":6,"name":"L"}]}];

		//var data = [{"ids":[{"1":"1"},{"2":"4"}],"price":0,"stock":0,"sku":0}];
		var data = [];
		var SKU = sku.init({ id:'sku', item: item, data:data });

		$('#get').on('click', function () {
			var data = SKU.getData();
			var data2 = SKU.getItem();
			$('#data-html').html(JSON.stringify(data) + "<br>" + JSON.stringify(data2));
		});	
	});
</script>
{/block}